<template>
  <div>
    <el-tabs v-model="levelType" @tab-click="tabClick">
      <el-tab-pane label="企业文章库" name="0"></el-tab-pane>
      <el-tab-pane label="我创建的文章" name="1" v-if="showTabs"></el-tab-pane>
    </el-tabs>
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="tableList"
      height="456"
      :header-cell-style="headerCellStyle"
      :row-style="rowStyle"
      :cell-style="cellStyle"
      row-key="id"
      @select="handleSelectionChange"
      @select-all="handleSelectionAll"
      style="width: 100%;"
    >
      <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
      <el-table-column type="index" width="55" align="center" label="序号" />
      <el-table-column label="标题" prop="materialName" min-width="120">
        <template slot-scope="{ row }">
          <div style="color: #082aff;cursor: pointer;" @click="toInfo(row)">
            {{ row.materialName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="标签" prop="materialTag">
        <template  slot-scope="{ row }">
          <tagGroupShowTable :tagGroup="row.tagVOS" />
        </template>
      </el-table-column>
      <el-table-column label="创建人" prop="createBy"></el-table-column>
      <el-table-column label="审核人" prop="examineBy"></el-table-column>
    </el-table>
    <div class="page">
      <NormalPagination :currentPage="pageNum" :pageSize="pageSize" :total="total" :pageSizeList="[10, 20, 30]" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"></NormalPagination>
    </div>
    <div class="btn-list">
      <el-button type="info" plain @click="selectCancelFn">取消</el-button>
      <el-button type="primary" @click="selectSureFn">确定</el-button>
    </div>
  </div>
</template>

<script>
import { articleList } from '@/api/article/group'
import {newline} from "js-beautify/js/src/javascript/acorn";

export default {
  props: {
    linkList: {
      type: Array,
      default: () => []
    },
    showTabs: {
      type: Boolean,
      default: true,
    }
  },
  data(){
    return{
      loading: false,
      levelType: '0',
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableList: [],
      headerCellStyle: {
        background: '#F8F8F8',
        color: '#1D1D1D',
        height: '40px',
        textAlign: 'center',
        borderLeft: 'none',
        borderRight: 'none',
      },
      rowStyle: {
        height: '40px',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
      },
      cellStyle: {
        height: '40px',
        padding: '0',
        textAlign: 'center',
        borderLeft: 'none',
        borderRight: 'none',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
      },
      currentSelectList: []
    }
  },
  mounted(){
    this.currentSelectList = JSON.parse(JSON.stringify(this.linkList))
    this.getList()
  },
  methods: {
    tabClick() {
      this.pageNum = 1
      this.pageSize = 10
      this.tableList = [];
      this.total = 0;
      this.getList()
    },
    getList(){
      this.loading = true
      articleList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        mediaType: 4,
        categoryId : '',
        levelType: this.levelType,
        materialName: ''
      }).then(res => {
        this.loading = false
        if(res.code === 200){
          let { rows, total } = res
          rows = JSON.parse(JSON.stringify(rows))
          if(rows.tagVOS){
            rows.tagVOS1 = JSON.parse(JSON.stringify(rows.tagVOS))
            rows.tagVOS = []
            rows.tagVOS1.forEach(tagGroup=>{
              tagGroup.tagName.split(',').forEach(tagName=>{
                rows.tagVOS.push({groupName:tagGroup.groupName,tagName})
              })
            })
          }

          this.tableList = rows
          this.tableList.forEach(element => {
            element.checked = false;
          })
          this.currentSelectList.length > 0 && this.tableList.forEach(element => {
            this.currentSelectList.forEach(item => {
              if (item.mediaType == 4 && element.id == item.id){
                element.checked = true;
                this.$refs.multipleTable.toggleRowSelection(element, true);
              }
            })
          })
          this.total = total
        }
      })
    },
    handleCurrentChange(val){
      this.pageNum = val
      this.getList()
    },
    handleSizeChange(val){
      this.pageNum = 1
      this.pageSize = val
      this.getList()
    },
    handleSelectionChange(valList, newVal) {
      this.$refs.multipleTable.clearSelection();
      // 切换最近一次选择数据的状态
      this.$refs.multipleTable.toggleRowSelection(newVal, true);
        this.currentSelectList[0] = {
          mediaType: 4,
          name: newVal.materialName,
          id: newVal.id,
          coverUrl: newVal.materialUrl,
          content: newVal.content,
          createTime: newVal.createTime,
          author: newVal.author,
          materialType: 4,
          materialName: newVal.materialName,
          materialUrl: newVal.materialUrl,
        }
      console.log(newVal, '1')
    },
    handleSelectionAll(valList) {
      this.$refs.multipleTable.clearSelection();
      if(this.currentSelectList.length > 0) this.$refs.multipleTable.toggleRowSelection(this.tableList.filter(item => item.id == this.currentSelectList[0].id && item.mediaType == this.currentSelectList[0].mediaType)[0], true);
    },
    selectCancelFn() {
      this.$emit("selectCancelFn");
    },
    selectSureFn() {
      this.$emit("confirm", this.currentSelectList);
      this.levelType = '0'
      this.$refs.multipleTable.clearSelection();
    },
    toInfo(row){
      this.$emit('view', row)
    },
  }
}
</script>

<style lang="scss" scoped>
.page{
  text-align: right;
}
.btn-list{
  margin-top: 10px;
  text-align: right;
}
</style>
